<!--
 * @Description: Stay hungry，Stay foolish
 * @Author: ''
 * @Date: 2023-10-15 19:08:05
 * @LastEditTime: 2023-10-15 20:32:36
 * @LastEditors: ''
-->
<template>
  <div>This is AvatarList</div>
  <div class="demo-inner-divider">基本用法</div>
  <e-avatarList :list="list" />
  <div class="demo-inner-divider">最大显示数量</div>
  <e-avatarList :list="list" :max="3" shape='square' :excess-style="excessStyle" >
    <template #excess>
      <div>
        xxxxx
      </div>
    </template>
  </e-avatarList>

  <avatarListMd class="markdown-body" ></avatarListMd>
</template>

<script setup>
import {ref,reactive} from "vue"

import avatarListMd from '../../docs/avatar-list.md'

const list=ref([
  {
    src: 'https://picsum.photos/id/71/300',
    tip: '史蒂夫·乔布斯'
  },
  {
    src: 'https://picsum.photos/id/72/300',
    tip: '斯蒂夫·沃兹尼亚克'
  },
  {
    src: 'https://picsum.photos/id/73/300',
    tip: '乔纳森·伊夫'
  },
  {
    src: 'https://picsum.photos/id/74/300',
    tip: '蒂姆·库克'
  },
  {
    src: 'https://picsum.photos/id/75/300',
    tip: '比尔·费尔南德斯'
  },
  {
    icon:"usergroup",
    tip:'图标'
  }
])
const excessStyle=reactive({
  color: '#f56a00',
  backgroundColor: '#fde3cf'
})
</script>
